function openDesignThemeWindow() {
    console.log(window.location.href)
    
    //var dsEditThemeWindow 
    if (Ext.getCmp('themeGrid').getSelection().length!=0) {
        var id = Ext.getCmp('themeGrid').getSelection()[0].data.id
        window.dsEditThemeWindow = Ext.create('Ext.window.Window', {
            title:'修改主题',
            width:1300,
            modal:true,
            height:900,
            listeners:{
                close:function( panel, eOpts ) {
                    //Ext.getCmp("themeGrid").getStore().load()

                }
            },
            html:'<iframe style="width:100%;height:100%" src="../charttheme/design?id='+id+'"></iframe>'
            /*loader: {
                url: '',
                autoLoad: true
            }*/
        })
    } else {
        window.dsEditThemeWindow = Ext.create('Ext.window.Window', {
            title:'修改主题',
            width:1300,
            height:900,
            modal:true,
            html:'<iframe style="width:100%;height:100%" src="../charttheme/design"></iframe>'
        })

    }
    window.dsEditThemeWindow.show()
}


function openEditTableThemeWindow(title) {
    var themeName = ""
    var themeSource = ""
    var themeId = ""
    if (Ext.getCmp('tableThemeGrid').getSelection().length!=0 && title!="增加表格主题") {
        themeName = Ext.getCmp('tableThemeGrid').getSelection()[0].data.theme_name
        themeSource = Ext.getCmp('tableThemeGrid').getSelection()[0].data.theme_source
        themeId = Ext.getCmp('tableThemeGrid').getSelection()[0].data.id
    }    

    var dsEditTableThemeWindow = Ext.create('Ext.window.Window', {
        title: title,
        iconCls:'x-fa fa-database',
        width: 1050,
        modal:true,
        items:[
            {xtype:'hidden',id:'tableThemeId',value:themeId},
            {xtype:'textfield',fieldLabel:'主题名称',id:'tableThemeName',value:themeName},
            {
                xtype:'container',
                html:'<div id="tableThemeEditor" style="width:1038px;height:500px"></div>',
                listeners:{
                    render:function() {
                        window.tableThemeEditor = ace.edit("tableThemeEditor");
                        window.tableThemeEditor.setTheme("ace/theme/monokai")
                        window.tableThemeEditor.setFontSize(20)
                        window.tableThemeEditor.session.setMode("ace/mode/html");
                        window.tableThemeEditor.on("change", function(value){
                            console.log(value)
                            var tpl = window.tableThemeEditor.session.getValue()
                            var html = ""
                            try {
                                html = baidu.template(tpl,
                                    {
                                        rows:[
                                            {a:1,b:2,c:3,d:4,e:5},
                                            {a:11,b:22,c:3,d:4,e:5},
                                            {a:111,b:222,c:3,d:4,e:5},
                                            {a:1111,b:2222,c:3,d:4,e:5},
                                        ],
                                        cols:['a','b','c','d','e']
                                        //rows:charSource.dataset.source,
                                        //cols:charSource.dataset.dimensions
                                    }
                                );  
                            } catch(e) {
                                console.log(e)
                            }
                            $('#tableThemePreview').html(html)
                        })
                        window.tableThemeEditor.session.setValue(themeSource)
                        
                    }
                }
            },
            {
                xtype:'container',
                html:'<div id="tableThemePreview"  style="width:1050px;height:300px"></div>'
            }/*,
            {
                xtype:'textarea',
                hidden:true,
                fieldLabel:'主题源码',
                id:'tableThemeSource',
                value:themeSource,
                width:'100%',
                height:800
            }*/
        ],
        buttons: [
            {
                xtype: 'button',
                text: '取消',
                handler: function() {
                    dsEditTableThemeWindow.close()
                }
            },
            {
                xtype: 'button',
                text: '确定',
                handler: function() {
                    var tableThemeName = Ext.getCmp("tableThemeName").getValue()
                    var tableThemeId = Ext.getCmp("tableThemeId").getValue()
                    Ext.Ajax.request({
                        url: "../tabletheme/save",
                        params: {
                            tableThemeId:tableThemeId,
                            tableThemeName:tableThemeName,
                            tableThemeSource:window.tableThemeEditor.session.getValue()
                        },
                        success:function(response, opts) {
                            dsEditTableThemeWindow.close()
                            Ext.getCmp("tableThemeGrid").getStore().load()
                        }
                    })
                }
            }
        ]
    })

    dsEditTableThemeWindow.show()
}

/*function openEditThemeWindow(title) {


    var dsEditThemeWindow = Ext.create('Ext.window.Window', {
        title: title,
        iconCls:'x-fa fa-database',
        width: 850,
        modal:true,
        items:[
            {xtype:'hidden',id:'themeId'},
            {xtype:'textfield',fieldLabel:'主题名称',id:'themeName'},
            {xtype:'textarea',fieldLabel:'主题源码',width:'100%',height:500,id:'themeSource'}
        ],
        buttons: [
            {
                xtype: 'button',
                text: '取消',
                handler: function() {
                    dsEditThemeWindow.close()
                }
            },
            {
                xtype: 'button',
                text: '确定',
                handler: function() {
                    var themeName = Ext.getCmp("themeName").getValue()
                    var themeSource = Ext.getCmp("themeSource").getValue()
                    var themeId = Ext.getCmp("themeId").getValue()
                    Ext.Ajax.request({
                        url: "../charttheme/save",
                        params: {
                            themeId:themeId,
                            themeName:themeName,
                            themeSource:themeSource
                        },
                        success:function(response, opts) {
                            dsEditThemeWindow.close()
                            Ext.getCmp("themeGrid").getStore().load()
                        }
                    })
                }
            }
        ]
    })

    dsEditThemeWindow.show()
}*/

function updateChartTheme() {
    var tableThemeStore = Ext.create('Ext.data.Store', {
        autoLoad: true,
        pageSize: 11111,
        remoteSort: true,
        remoteFilter:true,
        listeners:{
            beforeload:function() {
                
            },
            load:function( obj, records, successful, operation, eOpts ) {
                for(var i=0;i<records.length;i++) {
                    if (nowTableTheme!=null && nowTableTheme==records[i].data.id) {
                        Ext.getCmp("tableThemeGrid").getSelectionModel().select(records[i])
                        break
                    }
                }
            }
        },
        proxy: {
            type: 'ajax',
            url : '../tabletheme/store',
            reader: {
                type: 'json',
                root: 'results',
                totalProperty: 'total'
            }
        }
    })

    var themeStore = Ext.create('Ext.data.Store', {
        autoLoad: true,
        pageSize: 11111,
        remoteSort: true,
        remoteFilter:true,
        listeners:{
            beforeload:function() {
                
            },
            load:function( obj, records, successful, operation, eOpts ) {

                console.log(nowChartTheme)
                for(var i=0;i<records.length;i++) {
                    if (nowChartTheme!=null && nowChartTheme==records[i].data.id) {
                        Ext.getCmp("themeGrid").getSelectionModel().select(records[i])
                        break
                    }
                }
                
                
            }
        },
        proxy: {
            type: 'ajax',
            url : '../charttheme/store',
            reader: {
                type: 'json',
                root: 'results',
                totalProperty: 'total'
            }
        }
    });


    var themeTabs = Ext.create('Ext.tab.Panel', {
        listeners:{
            tabchange :function( tabPanel, newCard, oldCard, eOpts ) {

            }
        },
        items: [
            {
                title: '图表主题',
                items: [
                    {
                        xtype:'grid',
                        id:'themeGrid',
                        height:309,
                        store:themeStore,
                        allowDeselect:true,
                        listeners:{

                            select:function(obj, record, index, eOpts) {
                                if (displayTable==null||displayTable==false) {
                                    try {
                                        nowChartTheme = record.data.id
                                        nowChartThemeSource = JSON.parse(record.data.theme_source)
                                        nowChartThemeName = record.data.theme_name
                                        Ext.getCmp('chartPreview').remove(0)
                                        Ext.getCmp('chartPreview').add(
                                            {
                                                listeners:{
                                                    render:function( obj, eOpts ){
                                                        try{
                                                            chart1.dispose()
                                                        } catch(e) {
                                                            console.log(e)
                                                        }
                                                        var obj = JSON.parse(record.data.theme_source)
                                                        echarts.registerTheme(record.data.theme_name, obj)
                                                        chart1 = echarts.init(document.getElementById('chart1'), record.data.theme_name)
                                                        eval("var myOption = "+chartSourceDis)
                                                        chart1.setOption(myOption)
                                                    }
                                                },
                                                xtype:'container',
                                                html:'<div id="chart1" style="width: 900px;height:'+(document.documentElement.clientHeight-400)+'px;"></div>'
                                            }
                                        )
                                        
                                        
                                    } catch(e) {
                                        console.log(e)
                                    }
                                } 
                            },
                            deselect:function(obj, record, index, eOpts) {
                                nowChartTheme = null
                                nowChartThemeSource = null
                                nowChartThemeName = null
                                Ext.getCmp('chartPreview').remove(0)
                                Ext.getCmp('chartPreview').add(
                                    {
                                        listeners:{
                                            render:function( obj, eOpts ){
                                                chart1.dispose()
                                                chart1 = echarts.init(document.getElementById('chart1'))
                                                eval("var myOption = "+chartSourceDis)
                                                chart1.setOption(myOption)
                                            }
                                        },
                                        xtype:'container',
                                        html:'<div id="chart1" style="width: 900px;height:'+(document.documentElement.clientHeight-400)+'px;"></div>'
                                    }
                                )
                                
                                
                            }
                        },
                        tbar: [
                            { 
                                xtype: 'button', text: '增加主题',iconCls:'x-fa fa-plus',
                                handler:function() {
                                    //openEditThemeWindow('增加主题')
                                    openDesignThemeWindow()
                                } 
                            },
                            { 
                                xtype: 'button', text: '删除主题',iconCls:'x-fa fa-minus',
                                handler:function() {
                                    var id = Ext.getCmp('themeGrid').getSelection()[0].data.id
                                    Ext.Ajax.request({
                                        url: "../charttheme/delete",
                                        params: {id:id},
                                        success:function(response, opts) {
                                            Ext.getCmp('themeGrid').getStore().load()
                                        }
                                    })

                                }   
                            },
                            {
                                xtype:'button',text:'修改主题',iconCls:'x-fa fa-pencil',
                                handler:function() {
                                    openDesignThemeWindow()
                                }
                            }/*,
                            {
                                xtype:'button',text:'主题设计器',
                                handler:function() {
                                    window.open('../static/design.html')
                                }
                            }*/
                        ],
                        columns:[
                            { text: "主题ID", dataIndex: "id" },
                            { text: "主题名称", dataIndex: "theme_name" },
                            { 
                                text: "主题预览", 
                                dataIndex: "theme_source",
                                width:500,
                                renderer:function(value,metaData,record) {
                                    try{
                                        var themeJson = JSON.parse(value)
                                        var temp = "<div >&nbsp;"

                                        if (themeJson.backgroundColor!=null) {
                                            temp = "<div style='background-color:"+themeJson.backgroundColor+";height:25px;line-height:25px;text-align:left;vertical-align:middle' >&nbsp;"
                                        }

                                        if (themeJson.color!=null) {
                                            for(var i=0;i<themeJson.color.length;i++) {
                                                temp += "<span style='width:35px;height:25px;border:0px solid;background-color:"+themeJson.color[i]+
                                                "'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;"
                                            }
                                        }
                                        temp += "</div>"
                                        return temp
                                    } catch(e) {
                                        return ""
                                    }
                                    
                                }
                            }
                        ]
                    }

                ]
            }, 
            {
                title: '表格主题',
                items: [
                    {
                        xtype:'grid',
                        id:'tableThemeGrid',
                        height:309,
                        store:tableThemeStore,
                        allowDeselect:true,
                        listeners:{

                            select:function(obj, record, index, eOpts) {
                                nowTableTheme = record.data.id
                                nowTableThemeSource = record.data.theme_source
                                nowTableThemeName = record.data.theme_name
                                if (displayTable) {
                                    refreshPreview()
                                }
                            },
                            deselect:function(obj, record, index, eOpts) {
                                nowTableTheme = null
                                nowTableThemeSource = null
                                nowTableThemeName = null
                                if (displayTable) {
                                    refreshPreview()
                                }
                            }
                        },
                        tbar: [
                            { 
                                xtype: 'button', text: '增加主题',iconCls:'x-fa fa-plus',
                                handler:function() {
                                    openEditTableThemeWindow("增加表格主题")
                                } 
                            },
                            { 
                                xtype: 'button', text: '删除主题',iconCls:'x-fa fa-minus',
                                handler:function() {
                                    var id = Ext.getCmp('tableThemeGrid').getSelection()[0].data.id
                                    Ext.Ajax.request({
                                        url: "../tabletheme/delete",
                                        params: {id:id},
                                        success:function(response, opts) {
                                            Ext.getCmp('tableThemeGrid').getStore().load()
                                        }
                                    })

                                }   
                            },
                            {
                                xtype:'button',text:'修改主题',iconCls:'x-fa fa-pencil',
                                handler:function() {
                                    openEditTableThemeWindow('修改表格主题')
                                }
                            }
                        ],
                        columns:[
                            { text: "主题ID", dataIndex: "id" },
                            { text: "主题名称", dataIndex: "theme_name" },
                            { 
                                text: "主题预览", 
                                dataIndex: "theme_source",
                                flex:1,
                                renderer: function(value){
                                    var html = ""
                                    try {
                                        html = baidu.template(value,
                                            {
                                                rows:[
                                                    {a:1,b:2,c:3,d:4,e:5}
                                                ],
                                                cols:['a','b','c','d','e']
                                            }
                                        );  
                                    } catch(e) {
                                        console.log(e)
                                    }
                                    return html
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    })    


    Ext.getCmp('attrPanel').setTitle('选择图表主题')
    Ext.getCmp('attrPanel').remove(0)
    Ext.getCmp('attrPanel').add(themeTabs)
}

